第21天：實作待辦事項 App

2024 iThome 鐵人賽

DAY 21

自我挑戰組

使用 Microsoft Copilot 製作衛教網站系列第 21 篇

16th鐵人賽

zhongandrew

2024-10-01 10:29:20

239 瀏覽

分享至

第21天：實作待辦事項 App

今天是我參加 IT 鐵人賽的第二十一天，我決定實作一個簡單的待辦事項應用程式。這是我從影片裡一起學習製作的簡單待辦事項應用程式，並且能夠幫助我鞏固所學的知識。

首先，我設計了應用程式的基本結構。這個待辦事項應用程式將包含一個輸入框，用於輸入新的待辦事項，和一個按鈕，用於添加待辦事項。待辦事項將顯示在一個列表中，每個待辦事項旁邊都有一個刪除按鈕，用於刪除該待辦事項。

接著，我使用 HTML 來構建應用程式的結構。然後，我使用 JavaScript 來實現應用程式的功能。首先，我定義了一個函式，用於添加新的待辦事項。這個函式將從輸入框中獲取待辦事項的文本，並將其添加到列表中。然後，我定義了一個函式，用於刪除待辦事項。這個函式將從列表中移除指定的待辦事項。

以下是影片實作中的 HTML 編碼：

<!DOCTYPE html>
<html>
<head>
    <!-- 頁面的標題 -->
    <title>代辦事項</title>
    <!-- 連結外部的 CSS 樣式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 操作面板的容器 -->
    <div class="操作面板">
        <!-- 輸入區域的容器 -->
        <div class="輸入區域">
            <!-- 文字輸入欄，用於新增代辦事項 -->
            <input class="文字欄" placeholder="新增項目">
            <!-- 新增項目的按鈕 -->
            <button class="按鈕">+</button>
        </div>
        <!-- 代辦事項的清單 -->
        <ul class="清單">
        </ul>
    </div>
    <!-- 連結外部的 JavaScript 檔案 -->
    <script src="script.js"></script>
</body>
</html>

以下是影片實作中的 JavaScript編碼：

// 選取文字輸入欄
const 文字欄 = document.querySelector(".文字欄");
// 選取清單容器
const 清單 = document.querySelector(".清單");
// 選取新增按鈕
const 按鈕 = document.querySelector(".按鈕");

// 定義新增任務的函數
function 新任務() {
    // 如果文字欄是空的，則不執行任何操作
    if (文字欄.value === "") {
        return;
    }
    // 創建新的任務項目
    const 任務 = document.createElement("li");
    任務.innerHTML = `
        <input type="checkbox" class="打勾方塊">
        <label>${文字欄.value}</label>
        <button class="垃圾桶">🗑️</button>
    `;

    // 選取任務中的垃圾桶按鈕
    const 垃圾桶 = 任務.querySelector(".垃圾桶");
    // 選取任務中的打勾方塊
    const 打勾方塊 = 任務.querySelector(".打勾方塊");

    // 當垃圾桶按鈕被點擊時，移除該任務
    垃圾桶.addEventListener("click", function() {
        任務.remove();
    });

    // 當打勾方塊的狀態改變時，更新任務的樣式
    打勾方塊.addEventListener("change", function() {
        if (打勾方塊.checked) {
            // 如果打勾方塊被選中，將任務標記為完成
            任務.style.textDecoration = "line-through";
            任務.style.color = "#999";
            清單.append(任務);
        } else {
            // 如果打勾方塊未被選中，將任務標記為未完成
            任務.style.textDecoration = "none";
            任務.style.color = "";
            清單.prepend(任務);
        }
    });

    // 將新任務添加到清單中
    清單.append(任務);
    // 清空文字欄
    文字欄.value = "";
}

// 當按鈕被點擊時，新增任務
按鈕.addEventListener("click", 新任務);

// 當按下 Enter 鍵時，新增任務
文字欄.addEventListener("keyup", function(e) {
    if (e.key === "Enter") {
        新任務();
    }
});

今天的實作讓我對 JavaScript 的應用有了更深入的理解，並且能夠運用所學的技術來完成一個實際的項目。我期待在接下來的日子裡，能夠學習更多關於 JavaScript 和前端開發的知識，並將它們應用到我的衛教網站中。